<template>
  <div class="home">
    <div
      class="banner"
      v-if="isShow === false"
    >
      <el-carousel
        :interval="5000"
        arrow="always"
      >
        <el-carousel-item
          v-for="item in img"
          :key="item.ZDBM"
        >
          <img
            :src="item.imgUrl"
            alt=""
          >
        </el-carousel-item>
      </el-carousel>
      <div class="main">
        <!-- 成果 -->
        <div class="chengguo">
          <h2><span class="border"></span>成果</h2>
          <div style="display:flex;align-items: center;flex-wrap:wrap;justify-content: space-between;">
            <div
              v-for="item in achievementsList"
              :key="item.text"
              class="achievementItem"
            >
              <div style="text-align:center;padding:10px 0px">{{item.ZBMC}}</div>
              <div class="introduceitem">{{item.ZBZ}}</div>
            </div>
          </div>
        </div>
        <!-- 专业科室 -->
        <div class="zhuanye">
          <h2><span class="border"></span>专业科室</h2>
          <div style="display:flex;align-items: center;flex-wrap:wrap;justify-content: space-between;">
            <div
              v-for="item in departmentList"
              :key="item.zdmc"
              class="departmentitem"
              @click="departmentClick(item)"
            >
              <div class="keshi-img"><img
                  :src="item.url"
                  alt=""
                ></div>
              <div style="text-align:center;padding:10px 0px">{{item.zdmc}}</div>
              <div :class="item.ksjs != '' ?'introduceitemText':'introduceitem'">介绍 : {{item.ksjs}}</div>
              <div class="introduceitem">离线电话 : {{item.lxdh}}</div>
              <div class="introduceitem">地址 : {{item.address}}</div>
            </div>
          </div>
        </div>
        <!-- 下边的三部分 -->
        <div class="main-center">

          <!-- 用户注册情况 -->
          <div class="anli">
            <h2><span class="border"></span>用户注册情况</h2>
            <vue-seamless-scroll
              :data="realData"
              class="seamless-warp"
              :class-option="classOption"
            >
              <ul class="item">
                <li
                  v-for="(item,index) in realData"
                  :key="index"
                >
                  <span class="title">{{item.mswb}}</span>
                </li>
              </ul>
            </vue-seamless-scroll>
          </div>
          <!-- 用户申请情况 -->
          <div class="anli">
            <h2><span class="border"></span>项目申请情况</h2>
            <vue-seamless-scroll
              :data="applyData"
              class="seamless-warp"
              :class-option="defaultOption"
            >
              <ul class="item">
                <li
                  v-for="(applyItem,applyIndex) in applyData"
                  :key="applyIndex"
                >
                  <span class="title">{{applyItem.mswb}}</span>
                </li>
              </ul>
            </vue-seamless-scroll>
          </div>
          <!-- 经典案例 -->
          <div
            class="anli"
            style="display:none"
          >
            <h2><span class="border"></span>经典案例</h2>
            <div style="font-size:1.3rem">111</div>
          </div>
        </div>
      </div>
    </div>
    <DepartmentDetail
      :zdbm='zdbm'
      @goBack="isShow = false"
      v-else
    />
  </div>
</template>
<script>
import vueSeamlessScroll from 'vue-seamless-scroll';
import DepartmentDetail from './departmentDetail.vue';
import { getBaseAPI, getAchievementsAPI, getRegisterAPI, getApplyAPI, getYYXXAPI } from '@/api/index.js';
export default {
    components: { vueSeamlessScroll, DepartmentDetail },
    data() {
        return {
            zdbm: null,
            topShow: false, //记录当前返回顶部标志的可视状态
            scrollTop: 0, //当前滚动位置
            // 是否显示
            isShow: false,
            // 轮播图片
            img: [],
            // 科室数据
            departmentList: [],
            // 成果数据
            achievementsList: [],
            // 数据的margin-top
            marginTop: 0,
            // 注册人数据
            realData: [],
            // 申请人数据
            applyData: [],
            // 定时器
            timer: ''
        };
    },
    computed: {
        classOption() {
            return {
                step: 0.3, // 数值越大速度滚动越快
                limitMoveNum: this.realData.length, // 开始无缝滚动的数据量
                hoverStop: true, // 是否开启鼠标悬停stop
                direction: 1, // 0向下 1向上 2向左 3向右
                openWatch: true, // 开启数据实时监控刷新dom
                singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
            };
        },
        defaultOption() {
            return {
                step: 0.3,
                limitMoveNum: this.applyData.length,
                hoverStop: true,
                direction: 1,
                openWatch: true,
                singleHeight: 0,
                singleWidth: 0,
                waitTime: 1000
            };
        },
        achieveOption() {
            return {
                step: 0.3,
                limitMoveNum: this.achievementsList.length,
                hoverStop: true,
                direction: 1,
                openWatch: true,
                singleHeight: 0,
                singleWidth: 0,
                waitTime: 1000
            };
        }
    },

    created() {
        this.timer = setInterval(this.showNotice, 100); //100表示间隔时间，数字越大滚得越快
    },
    mounted() {
        window.addEventListener('scroll', this.scrollToTop); //监听滚动条
        this.getDepartmentData();
        this.getImgData();
        this.getAchievementsData();
        this.getRegisterData();
        this.getApplyData();
    },
    destroyed() {
        window.removeEventListener('scroll', this.scrollToTop); //移除滚动条监听
    },
    methods: {
        // 获取轮播图数据
        async getImgData() {
            const res = await getYYXXAPI({
                cxlx: 'Query_YYDT'
            });
            if (res.code == 'succ') {
                this.img = res.result;
            }
        },
        // 获取首页科室数据
        async getDepartmentData() {
            const res = await getBaseAPI({
                cxlx: 'Query_zyks',
                zdbm: 'null'
            });
            if (res.code == 'succ') {
                this.departmentList = res.result;
            }
        },
        // 跳转专业科室详情
        departmentClick(item) {
            this.zdbm = item.zdbm;
            // this.$router.push({path:'/frontHome/departmentDetail/'+id})
            this.isShow = true;
            this.$emit('isShow', !this.isShow);
            let timer = setInterval(() => {
                let ispeed = Math.floor(-this.scrollTop / 5);
                document.documentElement.scrollTop = document.body.scrollTop = this.scrollTop + ispeed;
                if (this.scrollTop === 0) {
                    clearInterval(timer);
                }
            }, 16);
            // 直接上移至顶部
            document.documentElement.scrollTop = document.body.scrollTop = 0;
        },
        // 获取成果数据
        async getAchievementsData() {
            const res = await getAchievementsAPI();
            if (res.code == 'succ') {
                this.achievementsList = res.result;
            }
        },
        // 获取用户注册情况
        async getRegisterData() {
            const res = await getRegisterAPI();
            if (res.code == 'succ') {
                this.realData = res.result;
            }
        },
        // 获取用户申请情况
        async getApplyData() {
            const res = await getApplyAPI();
            if (res.code == 'succ') {
                this.applyData = res.result;
            }
        },

        // 监听到的滚动的距离
        scrollToTop() {
            this.scrollTop = window.scrollY || window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
            // 计算距离顶部的高度，当高度大于300显示回顶部图标，小于300则隐藏
            if (this.scrollTop > 300) {
                this.topShow = true;
            } else {
                this.topShow = false;
            }
        }
    }
};
</script>
<style scoped>
.el-carousel__item h3 {
    color: #475669;
    opacity: 0.75;
    text-align: center;
}
::v-deep .el-carousel__container {
    height: 500px !important;
}
.home {
    width: 100%;
    min-height: 100vh;
}
.banner {
    width: 100%;
    overflow: hidden;
}
img {
    width: 100%;
    height: 100%;
}
.main {
    width: 100%;
    margin: 0 auto;
    padding: 10px;
    background: #f5f5f5;
}
h2 {
    padding: 10px 0px;
}
.achievementItem {
    width: 15%;
    padding: 10px;
    background: #fff;
    font-size: 1.2rem;
    text-align: center;
    margin: 0px 0px 5px 0px;
}
.departmentitem {
    width: 15%;
    min-height: 220px;
    padding: 10px;
    background: #fff;
    font-size: 1.2rem;
}
.departmentitem:hover {
    -webkit-box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
    box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
    -webkit-transform: translate3d(0, -2px, 0);
    transform: translate3d(0, -2px, 0);
    color: #409eff;
}
.border {
    border-left: 5px solid #409eff;
    height: 10px;
    padding-left: 10px;
}
.introduceitem {
    font-size: 1.1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 30px;
}
.introduceitemText {
    line-height: 24px;
    font-size: 1.1rem;
    width: 195px;
    height: 48px;
    overflow: hidden;
    position: relative;
}
.introduceitemText:after {
    content: '...';
    position: absolute;
    bottom: 0;
    right: 0;
    background: #fff;
    padding-left: 10px;
}
.zhuanye,
.chengguo {
    width: 90%;
    margin: 10px auto;
    padding: 10px;
}
.main-center {
    width: 90%;
    margin: 10px auto;
    padding: 15px 10px;
    display: flex;
    /* justify-content: space-between; */
}
.anli {
    width: 32%;
    background: #fff;
    margin: 0px 10px;
}
li {
    /* width: 250px; */
    height: 35px;
    margin: 5px 10px;
    border-radius: 20px;
    line-height: 30px;
    font-size: 1.3rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
li:nth-child(odd) {
    color: #d48265;
}
.seamless-warp {
    height: 350px;
    overflow: hidden;
}
.keshi-img {
    width: 65%;
    margin: 0 auto;
}
</style>